<template>
      <a-form
          :model="formState"
          name="basic"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 16 }"
          autocomplete="off"
          @finish="onFinish"
      >
        <a-form-item
            label="同步类型"
            name="syncType"
            :rules="[{ required: true, message: '同步类型不能为空' }]"
        >
          <a-select
              v-model:value="formState.syncType"
              placeholder="选择同步类型"
              :options="syncTypeOptions"
          ></a-select>
        </a-form-item>

        <a-form-item
            label="同步模式"
            name="syncMode"
            :rules="[{ required: true, message: '同步模式不能为空' }]"
        >
          <a-select
              v-model:value="formState.syncMode"
              placeholder="选择同步模式"
              :options="syncModeOptions"
          ></a-select>
        </a-form-item>


        <a-form-item
            label="同步时间"
            name="syncTime"
            :rules="[{ required: formState.syncType==='remote_to_local', message: '同步时间必填' }]"
        >
          <a-tooltip >
            <template #title>
              <div>每隔5秒执行一次：*/5 * * * * ?</div>
              <div>每隔1分钟执行一次：0 */1 * * * ?</div>
              <div>每天23点执行一次：0 0 23 * * ?</div>
              <div>每天凌晨1点执行一次：0 0 1 * * ?</div>
              <div>每月1号凌晨1点执行一次：0 0 1 1 * ?</div>
              <div>每月最后一天23点执行一次：0 0 23 L * ?</div>
              <div>每周星期天凌晨1点实行一次：0 0 1 ? * L</div>
              <div>在26分、29分、33分执行一次：0 26,29,33 * * * ?</div>
              <div>每天的0点、13点、18点、21点都执行一次：0 0 0,13,18,21 * * ?</div>
            </template>
          <a-input v-model:value="formState.syncTime" :placeholder="formState.syncType==='remote_to_local'?'':'实时同步不填写'"  suffix="cron表达式"/>
          </a-tooltip>
        </a-form-item>


        <a-form-item
            label="本地路径"
            name="localPath"
            :rules="[{ required: true, message: '本地路径必填' }]"
        >
          <a-input v-model:value="formState.localPath"/>
        </a-form-item>

        <a-form-item
            label="远端路径"
            name="remotePath"
            :rules="[{ required: true, message: '远端路径必填' }]"
        >
          <a-input v-model:value="formState.remotePath"/>
        </a-form-item>
        <a-form-item
            label="WebDav地址"
            name="webDavAddress"
            :rules="[{ required: true, message: 'WebDav地址必须填' }]"
        >
          <a-input v-model:value="formState.webDavAddress"/>
        </a-form-item>

        <a-form-item
            label="WebDav账号"
            name="webDavUsername"
            :rules="[{ required: true, message: 'WebDav账号必须填' }]"
        >
          <a-input v-model:value="formState.webDavUsername"/>
        </a-form-item>

        <a-form-item
            label="WebDav密码"
            name="webDavPassword"
            :rules="[{ required: true, message: 'WebDav密码必须填' }]"
        >
          <a-input-password v-model:value="formState.webDavPassword"/>
        </a-form-item>

        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
          <a-button type="primary"  style="width: 50%;background-color: #000c17;color: #ffffff"  html-type="submit">提交</a-button>
        </a-form-item>
      </a-form>
</template>

<script setup>
import {reactive} from 'vue';
import {syncWebDavConfigAdd,} from "../../../api/client/syncwebdav.js";

const formState = reactive({
  syncType:"",
  syncMode:"",
  syncTime:"",
  localPath: '',
  remotePath: '',
  webDavUsername: '',
  webDavPassword: '',
  webDavAddress: '',
});


const syncTypeOptions=[
  { value: 'local_to_remote', label: '本地同步远端' },
  { value: 'remote_to_local', label: '远端同步本地' },
]

const syncModeOptions=[
  { value: 'copy', label: '复制模式(同步时不删除文件，添加变动文件)' },
  { value: 'sync', label: '同步模式(会删除文件，保证两边文件一样)' },
]


const onFinish = values => {
  syncWebDavConfigAdd(values).then(res => {
    if (res.data) {
      location.reload();
    }
  })
};
</script>

<style lang="less">

.app-box {
  display: flex;
  justify-content: space-between;

  > .card {
    width: 100%;
    margin: 10px;
    padding: 10px;
  }

  > .card:nth-child(1) {
    flex: 2;
  }

  > .card:nth-child(2) {
    flex: 1;
  }
}

</style>
